<template>
  <div class="callcenter-apply box">
    <p class="title">
      {{
        isAduiting
          ? '您的申请我们已经收到，客户经理将在1个工作日内联系你'
          : '您所在的企业尚未开通呼叫中心功能'
      }}
    </p>
    <div class="tip">
      <img :src="callcenterImage1" />
      <div class="content">
        <p>呼叫中心</p>
        <span
        >使用呼叫中心，让您与客户更方便快捷地联系，并且清晰管理您的通话记录与数据</span
        >
      </div>
      <div class="divider"></div>
      <div class="help">
        <p>帮助你更好地创建应用服务</p>
        <ul>
          <li><a href="">帮助文档</a></li>
        </ul>
      </div>
    </div>
    <el-button
      :type="isAduiting ? 'default' : 'primary'"
      @click="applyDialogVisible = true"
      :disabled="isAduiting"
    >申请开通</el-button
    >
    <!-- 申请开通的对话框 -->
    <el-dialog
      title="申请开通呼叫中心"
      :visible.sync="applyDialogVisible"
      width="30%"
      @close="applyDialogClosed"
    >
      <el-form
        :model="applyForm"
        :rules="applyFormRules"
        ref="applyFormRef"
        
        label-position="top"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            v-model="applyForm.companyName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkmanName">
          <el-input
            v-model="applyForm.linkmanName"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="applyForm.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applyDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="pending"
          :loading="pending"
          @click="apply"
        >申 请</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as CallCenterApi from '@src/api/CallCenterApi';
import { validatePhone } from '@src/util/validator'

import { getOssUrl } from '@src/util/assets' 
const callcenterImage1 = getOssUrl('/screen-data-time.png')
export default {
  name: 'call-center-apply',
  props: {
    // 申请状态 0 未申请 1 已申请审核中
    status: {
      type: Number,
      default: 0,
    },
  },
  data() {
    // 验证固话手机号的规则
    const checkMobile = (rule, value, cb) => {
      if (validatePhone(value)) {
        return cb();
      }
      cb(new Error('请输入合法的电话号码'));
    };
    return {
      callcenterImage1,
      pending: false,
      applyDialogVisible: false,
      applyForm: {
        companyName: '',
        linkmanName: '',
        phone: '',
      },
      // 添加表单的验证规则对象
      applyFormRules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        linkmanName: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    // 是否申请中
    isAduiting() {
      return this.status === 1;
    },
  },
  methods: {
    applyDialogClosed() {
      this.$refs.applyFormRef.resetFields();
    },
    apply() {
      this.$refs.applyFormRef.validate(async valid => {
        if (!valid) return;
        try {
          this.pending = true;
          const { code, message } = await CallCenterApi.saveAccount(
            this.applyForm
          );
          if (code !== 0)
            return this.$platform.notification({
              title: '申请失败',
              message: message || '',
              type: 'error',
            });
          this.pending = false;
          this.applyDialogVisible = false;
          this.applyDialogClosed();
          this.isAduiting = true;
          this.$platform.notification({
            title: '申请成功',
            type: 'success',
          });
        } catch (error) {
          this.pending = false;
          console.error(error);
        }
      });
    },
  },
};
</script>
<style lang="scss">
.callcenter-apply {
  .title {
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 500;
    color: #051a13;
    text-align: center;
  }
  .tip {
    height: 180px;
    background: #f7f8f9;
    border-radius: 4px;
    margin-bottom: 50px;
    display: flex;
    padding: 30px;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .content {
      flex: 1;
      width: 330px;
      p {
        font-size: 16px;
        text-align: left;
        margin-bottom: 8px;
      }
    }
    .divider {
      margin: 0 20px;
      width: 2px;
      height: 100%;
      background-color: #eee;
    }
    .help {
      flex: 1;
      p {
        font-size: 16px;
        text-align: left;
        margin-left: 1em;
        margin-bottom: 8px;
      }
      a {
        color: #409eff;
      }
    }
  }

}
</style>
